<template>
  <Card dis-hover :bordered="false">
    <Row :gutter="8" class="ivu-mb-8">
      <Col>
        <DatePicker
          type="daterange"
          v-model="params.arrdate"
          class="ivu-mr-8"
          ref="date"
          @on-change="askData"
          placeholder="请选择时间段"
          :time-picker-options="{ steps: [1, 10, 10] }"
          v-width="200"
          :clearable="false"
          :options="dateOption"
          @click.native="nativeClick"
        ></DatePicker>
      </Col>
      <Col>
        <Select
          v-model="params.project_id"
          v-width="200"
          placeholder="请选择项目"
          @on-change="askDataCondition"
        >
          <Option
            v-for="item in projectList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <!-- <Col>
            <Select v-model="params.net_config_id" v-width="200" placeholder="请选择营销中心" @on-change="askDataCondition" clearable>
                <Option v-for="item in configList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col> -->
    </Row>
    <div class="ivu-mb-8 card">
      <Row type="flex" justify="space-between" align="middle">
        <Col>
          <div class="scheduleBox">
            <div>
              <p class="Boxfixed" v-if="diff.arrived_num">
                <font v-if="diff.arrived_num > 0" color="#ed4014"
                  ><Icon type="md-arrow-up"></Icon>{{ diff.arrived_num }}</font
                >
                <font v-else-if="diff.arrived_num < 0" color="#19be6b"
                  ><Icon type="md-arrow-down"></Icon
                  >{{ diff.arrived_num }}</font
                >
              </p>
            </div>
            <div>
              <p class="bignum">{{ actual.arrived_num }}</p>
              <p class="text">到诊</p>
            </div>
          </div>
        </Col>
        <Col
          ><div
            class="scheduleBox"
            style="width: 1px; border-left: 1px #dcdee2 solid"
          ></div
        ></Col>
        <Col>
          <div class="scheduleBox">
            <div>
              <p class="Boxfixed" v-if="diff.plan_consume">
                <font v-if="diff.plan_consume > 0" color="#19be6b"
                  ><Icon type="md-arrow-up"></Icon>¥{{
                    diff.plan_consume
                  }}</font
                >
                <font v-else-if="diff.plan_consume < 0" color="#ed4014"
                  ><Icon type="md-arrow-down"></Icon>¥{{
                    diff.plan_consume
                  }}</font
                >
              </p>
            </div>
            <div>
              <p class="smallnum">¥{{ actual.plan_consume }}</p>
              <p class="text">消费</p>
            </div>
          </div>
        </Col>
        <Col>
          <div class="scheduleBox">
            <div>
              <p class="Boxfixed" v-if="diff.arrived_cost">
                <font v-if="diff.arrived_cost > 0" color="#19be6b"
                  ><Icon type="md-arrow-up"></Icon>¥{{
                    diff.arrived_cost
                  }}</font
                >
                <font v-else-if="diff.arrived_cost < 0" color="#ed4014"
                  ><Icon type="md-arrow-down"></Icon>¥{{
                    diff.arrived_cost
                  }}</font
                >
              </p>
            </div>
            <div>
              <p class="smallnum">¥{{ actual.arrived_cost }}</p>
              <p class="text">到诊成本</p>
            </div>
          </div>
        </Col>
        <Col
          ><div
            class="scheduleBox"
            style="width: 1px; border-right: 1px #dcdee2 solid"
          ></div
        ></Col>
        <Col>
          <div class="scheduleBox">
            <p></p>
            <div>
              <p class="bignum">{{ now_arrived_num }}</p>
              <p class="text">今日到诊</p>
            </div>
          </div>
        </Col>
      </Row>
      <template v-if="typeof finish_rate == 'number'">
        <Progress
          :percent="finish_rate >= 100 ? 100 : finish_rate"
          :stroke-width="5"
        >
          <span>{{ finish_rate }}%</span>
        </Progress>
      </template>
    </div>
    <Table
      :columns="columns"
      :data="data"
      border
      :span-method="handleSpan"
      :loading="loading"
    >
      <template slot-scope="{ row }" slot="arrived_num">
        <span v-if="row.names === '实际'">{{
          row.arrived_num === "" ? "/" : row.arrived_num
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.arrived_num === "" ? "/" : row.arrived_num
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.arrived_num > 0 ? '#ed4014' : '#19be6b'">{{
            row.arrived_num > 0 ? `+${row.arrived_num}` : row.arrived_num
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="qz_dialogue_num">
        <span v-if="row.names === '实际'">{{
          row.qz_dialogue_num === "" ? "/" : row.qz_dialogue_num
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.qz_dialogue_num === "" ? "/" : row.qz_dialogue_num
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.qz_dialogue_num > 0 ? '#ed4014' : '#19be6b'">{{
            row.qz_dialogue_num > 0
              ? `+${row.qz_dialogue_num}`
              : row.qz_dialogue_num
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="dialogue_num">
        <span v-if="row.names === '实际'">{{
          row.dialogue_num === "" ? "/" : row.dialogue_num
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.dialogue_num === "" ? "/" : row.dialogue_num
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.dialogue_num > 0 ? '#ed4014' : '#19be6b'">{{
            row.dialogue_num > 0 ? `+${row.dialogue_num}` : row.dialogue_num
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="conver_rate">
        <span v-if="row.names === '实际'">{{
          typeof row.conver_rate == "number"
            ? `${row.conver_rate}%`
            : row.conver_rate === ""
            ? "/"
            : row.conver_rate
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.conver_rate === "" ? "/" : `${row.conver_rate}%`
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.conver_rate > 0 ? '#ed4014' : '#19be6b'">{{
            row.conver_rate > 0
              ? `+${row.conver_rate}%`
              : row.conver_rate < 0
              ? `${row.conver_rate}%`
              : ""
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="plan_consume">
        <span v-if="row.names === '实际'">{{
          row.plan_consume === "" ? "/" : row.plan_consume
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.plan_consume === "" ? "/" : row.plan_consume
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.plan_consume > 0 ? '#19be6b' : '#ed4014'">{{
            row.plan_consume > 0 ? `+${row.plan_consume}` : row.plan_consume
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="arrived_cost">
        <span v-if="row.names === '实际'">{{
          row.arrived_cost === "" ? "/" : row.arrived_cost
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.arrived_cost === "" ? "/" : row.arrived_cost
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.arrived_cost > 0 ? '#19be6b' : '#ed4014'">{{
            row.arrived_cost > 0 ? `+${row.arrived_cost}` : row.arrived_cost
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="qz_dialogue_cost">
        <span v-if="row.names === '实际'">{{
          row.qz_dialogue_cost === "" ? "/" : row.qz_dialogue_cost
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.qz_dialogue_cost === "" ? "/" : row.qz_dialogue_cost
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.qz_dialogue_cost > 0 ? '#19be6b' : '#ed4014'">{{
            row.qz_dialogue_cost > 0
              ? `+${row.qz_dialogue_cost}`
              : row.qz_dialogue_cost
          }}</font>
        </span>
      </template>
      <template slot-scope="{ row }" slot="dialogue_cost">
        <span v-if="row.names === '实际'">{{
          row.dialogue_cost === "" ? "/" : row.dialogue_cost
        }}</span>
        <span v-else-if="row.names === '计划'">{{
          row.dialogue_cost === "" ? "/" : row.dialogue_cost
        }}</span>
        <span v-else-if="row.names === '差值'">
          <font :color="row.dialogue_cost > 0 ? '#19be6b' : '#ed4014'">{{
            row.dialogue_cost > 0 ? `+${row.dialogue_cost}` : row.dialogue_cost
          }}</font>
        </span>
      </template>
    </Table>
  </Card>
</template>
<script>
import { netreportschedule, netreportschedulecondition } from "@/api/hqapi";
import dayjs from "dayjs";
export default {
  name: "schedule",
  data() {
    return {
      params: {
        project_id: "",
        // net_config_id: "",
        arrdate: [
          dayjs().startOf("month").format("YYYY-MM-DD"),
          // dayjs().format('YYYY-MM-DD')
          dayjs().startOf("month").format("DD") === "01"
            ? dayjs().startOf("month").format("YYYY-MM-DD")
            : dayjs().subtract(1, "day").format("YYYY-MM-DD"),
        ],
      },
      configList: [],
      projectList: [],
      columns: [
        { title: "渠道", key: "name", minWidth: 100 },
        { title: "对比", key: "names", minWidth: 80 },
        { title: "到诊", slot: "arrived_num", minWidth: 100 },
        { title: "确诊对话", slot: "qz_dialogue_num", minWidth: 100 },
        { title: "对话", slot: "dialogue_num", minWidth: 100 },
        { title: "转化率", slot: "conver_rate", minWidth: 100 },
        { title: "消费", slot: "plan_consume", minWidth: 150 },
        { title: "到诊成本", slot: "arrived_cost", minWidth: 150 },
        { title: "确诊对话成本", slot: "qz_dialogue_cost", minWidth: 150 },
        { title: "对话成本", slot: "dialogue_cost", minWidth: 150 },
      ],
      data: [],
      loading: false,
      actual: {},
      diff: {},
      finish_rate: "",
      now_arrived_num: "",
      dateOption: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      bool: true,
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      this.askDataCondition();
    },
    askDataCondition() {
      let params = {
        project_id: this.params.project_id,
        // net_config_id: this.params.net_config_id,
      };
      netreportschedulecondition(params).then((res) => {
        this.configList = res.config;
        this.projectList = res.project;
        if (this.bool) {
          this.params.project_id = res.project[0] ? res.project[0].value : "";
          this.bool = false;
          this.initial();
        } else {
          this.askData();
        }
      });
    },
    askData() {
      let params = {
        start_time: dayjs(this.params.arrdate[0]).format("YYYY-MM-DD"),
        end_time: dayjs(this.params.arrdate[1]).format("YYYY-MM-DD"),
        project_id: this.params.project_id ? this.params.project_id : "",
        // net_config_id: this.params.net_config_id
        //   ? this.params.net_config_id
        //   : "",
      };
      this.loading = true;
      netreportschedule(params).then((res) => {
        this.actual = res.actual;
        this.diff = res.diff;
        this.finish_rate = +res.finish_rate;
        this.now_arrived_num = res.now_arrived_num;
        this.data = [];
        res.list.forEach((item) => {
          this.data.push({
            id: item.id,
            name: item.name,
            finish_rate: item.finish_rate,
            names: "实际",
            ...item.actual,
          });
          this.data.push({
            id: item.id,
            name: item.name,
            finish_rate: item.finish_rate,
            names: "计划",
            ...item.plan,
          });
          this.data.push({
            id: item.id,
            name: item.name,
            finish_rate: item.finish_rate,
            names: "差值",
            ...item.diff,
          });
        });
        this.loading = false;
      });
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 3 === 0 && column.key === "name") {
        return [3, 1];
      } else if (rowIndex % 3 === 1 && column.key === "name") {
        return [0, 0];
      } else if (rowIndex % 3 === 2 && column.key === "name") {
        return [0, 0];
      }
    },
    // 限制当月选择范围
    nativeClick(e) {
      const target = this.$refs["date"].$refs["pickerPanel"];
      target.handlePickClick = () => {
        // 这里加这么一段
        const { from, selecting } = target["rangeState"];
        if (from && selecting) {
          this.dateOption = {
            disabledDate(value) {
              let start_date = dayjs(from)
                .add(-1, "month")
                .endOf("month")
                .format("YYYY-MM-DD");
              let now_start_date = dayjs()
                .add(-1, "month")
                .endOf("month")
                .format("YYYY-MM-DD");
              let end_date =
                start_date === now_start_date
                  ? dayjs().format("YYYY-MM-DD")
                  : dayjs(from).endOf("month").format("YYYY-MM-DD");
              const startTime = new Date(start_date);
              const endTime = new Date(end_date);

              return !(value >= startTime && value <= endTime);
            },
          };
        }
      };
      const { from, selecting } = target["rangeState"];
      if (from && selecting) {
        this.dateOption = {
          disabledDate(value) {
            let start_date = dayjs(from)
              .add(-1, "month")
              .endOf("month")
              .format("YYYY-MM-DD");
            let now_start_date = dayjs()
              .add(-1, "month")
              .endOf("month")
              .format("YYYY-MM-DD");
            let end_date =
              start_date === now_start_date
                ? dayjs().format("YYYY-MM-DD")
                : dayjs(from).endOf("month").format("YYYY-MM-DD");
            const startTime = new Date(start_date);
            const endTime = new Date(end_date);

            return !(value >= startTime && value <= endTime);
          },
        };
      } else {
        this.dateOption = {
          disabledDate(date) {
            return date && date.valueOf() > Date.now();
          },
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ivu-progress-show-info {
  .ivu-progress-outer {
    padding-right: 80px;
    margin-right: -80px;
  }
}
.card {
  border: 1px solid #dcdee2;
  border-radius: 4px;
  padding: 14px 20px 2px 20px;
  .text {
    color: #888;
  }
  .bignum {
    color: #000;
    font-size: 24px;
    font-weight: bold;
  }
  .smallnum {
    color: #000;
    font-size: 18px;
    font-weight: bold;
  }
  .scheduleBox {
    height: 70px;
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .Boxfixed {
      font-size: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
}
</style>
